<template>
    <div>
        <div class="crumbs">
            <Breadcrumb>
                <BreadcrumbItem ><Icon type="md-crop" /> 备注</BreadcrumbItem>
            </Breadcrumb>
        </div>
        <div style="text-align:right;">
            <Button type="primary" icon="md-add" @click="add">添加备注</Button>
        </div>

        <Card style="margin-top: 20px;">
            <Table :columns="columns" :data="tableData" :loading="loading" stripe border highlight-row></Table>
        </Card>

        <Modal :title="dialogTitle" v-model="dialogShow" draggable :width="1000">
            <Form ref="form" :model="form" :label-width="100" :rules="rules">
                <FormItem label="英文名称" prop="name">
                    <Input v-model="form.name" placeholder="英文名称,不要随意更改"></Input>
                </FormItem>
                <FormItem label="中文名称" prop="module">
                    <Input v-model="form.module" placeholder="中文名称，随意修改，只为了便于理解"></Input>
                </FormItem>
                <FormItem label="内容" prop="content">
                    <Input type="textarea" :autosize="{ minRows: 6, maxRows: 15}" v-model="form.content" placeholder="说明的内容，如果要写代码，要转义尖括号"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="cancel">取消</Button>
                <Button type="primary" @click="save">确定</Button>
            </div>
        </Modal>

        <Modal title="复制代码" v-model="copyShow">
            <Input ref="copyInput" @click="$event.target.select()" v-model="copyText"></Input>
        </Modal>

        <Remark :name="module"></Remark>
    </div>
</template>

<script>
    let module = 'remark';
    export default {
        components: {
            Remark: require('./common/remark.vue') //注释说明组件（保存在数据库中）
        },
        data() {
            return {
                url: pub.apiDomain + module,
                module: module,
                dialogShow: false,
                dialogTitle: '',
                form:{},    //编辑信息
                loading: true,
                copyShow: false,
                copyText: '',
                tableData: [],
                columns: [
                    {title: 'id', key: 'id', width:60, sortable: true, sortType: 'desc'},
                    {title: '备注key', key: 'name', width:120, sortable: true},
                    {title: '中文名称', key: 'module', width:120, sortable: true},
                    {title: '内容', key: 'content', sortable: true, tooltip:true},
                    {
                        title: '操作',
                        width: 300,
                        key: 'action',
                        render: (h, params) => {
                            return <span>
                                <i-button type="primary" icon="ios-create-outline" style="margin-right:6px;" onClick={(e)=>{this.handleEdit(params.row)}}>编辑</i-button>
                                <i-button type="error" icon="md-trash" style="margin-right:6px;" onClick={(e)=>{this.remove(params.row.id)}}>删除</i-button>
                                <i-button type="success" icon="md-copy" onClick={(e)=>{this.copy(params.row)}}>复制代码</i-button>
                            </span>
                        }
                    }
                ],
                //验证规则:需要在form组件加rule="rules",在input等组件上加prop="字段名"
                rules: {
                    name: [{ required: true, message: '备注名称不能为空', trigger: 'blur' }],
                    content: [{ required: true, message: '备注内容不能为空', trigger: 'blur' }],
                },
                uploadApi: pub.apiDomain + 'index/upload',
                headers: {'Authorization': pub.token()},
            }
        },
        created(){
            this.getData();   //由于设置了默认排序,有排序字段会自动触发sortChange操作加载列表
        },
        methods: {
            //添加
            add(){
                this.dialogShow = true;
                this.dialogTitle = '添加备注';
                this.form = {};
            },
            //加载内容：在翻页或搜索后
            getData(){
                this.$axios.post(this.url + '/ls', this.params).then(res => {
                    this.tableData = res.d;
                    this.loading = false;
                    this.$refs['form'].resetFields();
                });
            },
            //编辑
            handleEdit(row) {
                this.dialogShow = true;
                this.dialogTitle = '编辑备注';
                this.form = row;
            },
            //删除
            remove(id) {
                if(!confirm('确定删除吗？')) return false;
                this.$axios.get(this.url + '/del/id/' + id).then(res => {
                    this.$Message.success('删除成功');
                    this.getData();
                });
            },
            //复制代码
            copy(row) {
                this.copyText = '<Remark name="'+row.name+'"></Remark>';
                this.copyShow = true;
                setTimeout(() => {
                    this.$refs.copyInput.focus();
                }, 10);
            },
            cancel() {
                this.dialogShow = false;
                this.getData();
            },
            //提交表单
            save() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.$axios.post(this.url + '/save', this.form).then((res) => {
                            this.$Message.success('保存成功！');
                            this.dialogShow = false;
                            this.getData();
                        })
                    } else {
                        return false;
                    }
                });
            },
            //文件上传
            handleRemove() {
                this.form.img = '';
                this.img = [];
            },
            //文件上传
            onSuccess(res, file, fileList) {
                this.form.content = res.m;
            },
        }
    }
</script>